<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>其他业务油耗</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-form layout="inline">
        <a-form-item label="业务类型">
          <a-select v-model="searchForm.businessType" class="selectWidth">
            <a-select-option key>全部</a-select-option>
            <a-select-option key="SHUNTING">业务调车</a-select-option>
            <a-select-option key="UPKEEP">车辆保养</a-select-option>
            <a-select-option key="REPAIR">车辆维修</a-select-option>
            <a-select-option key="ANNUAL">车辆年检</a-select-option>
            <a-select-option key="OTHER">其他</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="牵引车车牌号">
          <a-input v-model="searchForm.truckNumber" />
        </a-form-item>
        <a-form-item label="挂车牌号">
          <a-input v-model="searchForm.trailerNumber" />
        </a-form-item>
        <a-form-item label="司机">
          <a-input v-model="searchForm.driverName" />
        </a-form-item>
        <a-form-item label="日期">
          <a-range-picker @change="onChange">
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="handleSubmit1">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleCreate">+ 创建油耗</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="exportExcel">导出excel</a-button>
        </a-form-item>
      </a-form>

      <a-table
        :columns="columns"
        :data-source="tableData"
        :loading="loading"
        class="tableMargin"
        :pagination="pagination"
        rowKey="inAndOutId"
      >
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="opt" slot-scope="text, record">
          <a @click="viewIt(record.inAndOutId)">查看</a>
        </template>
      </a-table>
    </div>

    <!-- 创建油耗 -->
    <createOtherBusiness :visible="createVisible" @close="setVisible" />

    <!-- 查看油耗 -->
    <a-modal :visible="detailVisible" title="查看油耗" :footer="null" @cancel="closeDetail">
      <a-row>
        <a-col :span="24">
          <a-descriptions :column="2">
            <a-descriptions-item label="业务类型">{{detail.businessType}}</a-descriptions-item>
            <a-descriptions-item label="牵引车车牌号">{{detail.truckNumber}}</a-descriptions-item>
            <a-descriptions-item label="司机">{{detail.driverName}}</a-descriptions-item>
            <a-descriptions-item label="挂车车牌号">{{detail.trailerNumber}}</a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1">
            <a-descriptions-item label="备注">{{detail.remark}}</a-descriptions-item>
            <a-descriptions-item label="上传凭证">
              <viewer :images="voucherPicsArr" :options="{url: 'data-x'}">
                <template v-for="(src,index) in voucherPicsArr">
                  <img
                    style="width:100px;height:100px;margin-right:10px;border:1px solid #eee"
                    :src="`${src}?x-oss-process=image/resize,h_100`"
                    :data-x="src"
                    :key="index"
                    v-if="src"
                  />
                </template>
              </viewer>
            </a-descriptions-item>
          </a-descriptions>

          <a-divider dashed />

          <a-descriptions :column="2">
            <a-descriptions-item label="里程数(km)">{{detail.mileage}}</a-descriptions-item>
            <a-descriptions-item label="耗油系数(L/km)">{{detail.rate}}</a-descriptions-item>
            <a-descriptions-item label="耗油量(L)">{{detail.oilVolume}}</a-descriptions-item>
            <a-descriptions-item label="油耗费用(元)">
              {{detail.totalAmount}}
              <a
                style="margin-left: 20px"
                @click="() => {detailClose = !detailClose}"
              >{{detailClose?'收起':'显示'}}价格明细</a>
            </a-descriptions-item>
            <a-descriptions :column="1">
              <a-col :span="24" v-show="detailClose">
                <a-table
                  size="small"
                  :columns="columns2"
                  :data-source="detail.detailList"
                  :pagination="false"
                  rowKey="detailId"
                ></a-table>
              </a-col>
            </a-descriptions>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import {Divider} from 'ant-design-vue'
import { commonExport } from '@/api/request'
import {queryOtherOilOutList, queryTruckOilInAndOutDetailByOut} from '@/api/landCenter'
import createOtherBusiness from './fuelConsumptionCreateOfOtherBusiness'

export default {
  data () {
    const columns = [
      {
        title: '序号',
        width: '70px',
        scopedSlots: {customRender: 'rn'}
      },
      {
        title: '业务类型',
        dataIndex: 'businessType'
      },
      {
        title: '牵引车',
        dataIndex: 'truckNumber'
      },
      {
        title: '挂车',
        dataIndex: 'trailerNumber',
        customRender: (text) => {
          return text || '--'
        }
      },
      {
        title: '司机',
        dataIndex: 'driverName'
      },
      {
        title: '里程数（km）',
        dataIndex: 'mileage'
      },
      {
        title: '耗油量（L）',
        dataIndex: 'oilVolume'
      },
      {
        title: '金额（元）',
        dataIndex: 'totalAmount'
      },
      {
        title: '日期',
        dataIndex: 'createTime'
      },
      {
        title: '备注',
        dataIndex: 'remark',
        ellipsis: true
      },
      {
        title: '操作',
        scopedSlots: {customRender: 'opt'}
      }
    ]

    return {
      searchForm: {
        businessType: '',
        truckNumber: '',
        driverName: '',
        trailerNumber: '',
        time1: '',
        time2: ''
      },
      loading: false,
      columns: columns,
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10,
      createVisible: false,
      detailVisible: false,
      detail: {
        voucherPics: '',
        detailList: []
      },
      detailClose: false,
      columns2: [{
        title: '采购批次',
        dataIndex: 'batchNo'
      }, {
        title: '单价(元/L)',
        dataIndex: 'price'
      }, {
        title: '油量(L)',
        dataIndex: 'oilVolume'
      }, {
        title: '交易金额(元)',
        dataIndex: 'amount'
      }]
    }
  },
  components: {
    createOtherBusiness,
    [Divider.name]: Divider
  },
  computed: {
    voucherPicsArr () {
      return this.detail.voucherPics ? this.detail.voucherPics.split(',') : null
    }
  },
  methods: {
    onChange (date, dataStr) {
      this.searchForm.time1 = dataStr[0]
      this.searchForm.time2 = dataStr[1]
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.loading = true
      queryOtherOilOutList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.loading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.loading = false })
    },
    exportExcel () {
      commonExport('/truckStock/exportOtherOilOutList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    handleCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.createVisible = true
    },
    setVisible (isCreate) {
      this.createVisible = false
      if (isCreate) {
        this.handleSubmit()
      }
    },
    viewIt (inAndOutId) {
      this.detailVisible = true
      this.detail = {voucherPics: ''}
      queryTruckOilInAndOutDetailByOut({inAndOutId, sType: 1}).then(rsp => {
        this.detail = Object.assign({}, this.detail, rsp.data)
      })
    },
    closeDetail () {
      this.detailVisible = false
    }
  },
  mounted () {
    this.handleSubmit()
  }
}
</script>
